<template>
  <div class="page-container-padding">
    <!-- 检索条件 -->
    <div style="display: flex;align-items: center;">
      <div class='index-flex-label'>期数:</div>
      <el-input style="width: 220px;" clearable v-model.trim="queryIssue"></el-input>
      <span class='index-flex-label'>作者:</span>
      <el-input  style="width: 300px;" clearable v-model.trim="queryAuthor"></el-input>
      <span class='index-flex-label'>日期:</span>
      <el-date-picker v-model="queryDate" @change="queryDateArticle"></el-date-picker>
      <span class='index-flex-label'>标题:</span>
      <el-input  style="width: 330px;" clearable v-model.trim="queryTitle"></el-input>
      <el-button style="margin-left: 8px;" type="primary" :loading="loadingArticle" @click='refreshQhrbArticle'>检索</el-button>
    </div>
    <div v-if="layoutList.length>0" style="max-width: 1303px;">
      <br>
      <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);padding: 5px 10px;">
        <el-button type="text" style="margin-right: 15px;" v-for="item in layoutList" :key="item.layout" @click="openLayout(item)">版面{{ item.layout }}</el-button>
      </div>
    </div>
    <br>
    <div style="max-width: 1303px;">
      <el-card>
        <el-table :data="articleList" highlight-current-row
        @cell-click='articleTableCellClick'
        >
          <el-table-column prop="title" label="标题" min-width="360" class-name="column-title" show-overflow-tooltip></el-table-column>
          <el-table-column prop="authors" label="作者" min-width="100"></el-table-column>
          <el-table-column prop="words" label="字数" min-width="80"></el-table-column>
          <el-table-column prop="issue_num" label="期数" min-width="70"></el-table-column>
          <el-table-column prop="layout" label="版面" min-width="70"></el-table-column>
          <el-table-column prop="is_special" label="特刊" min-width="70">
            <template #default="{ row }">{{ row.is_special===1?'是':'否' }}</template>
          </el-table-column>
          <el-table-column prop="create_time" label="时间" min-width="80"></el-table-column>
        </el-table>
      </el-card>
      <el-pagination
        background
        hide-on-single-page
        layout="total, prev, pager, next, jumper"
        style="margin-top: 5px"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>

      <!-- 文章的内容弹窗 -->
      <el-dialog :visible.sync='showArticleContent' :title="dialogArticle.title" @close="clearDialogArticle"
      width="70%" top="2%" custom-class='article-dialog'>
        <div style="height: 75vh;overflow: scroll;">
          <div style="font-size:26px; text-align:center; color:#000000; font-weight:bold;">{{ dialogArticle.title }}</div>
          <div style="text-align: right;margin-right: 10%;font-size:14px; color:#363662; margin-left:10px; margin-top:20px;"><span style="margin-right:20px;" v-show="dialogArticle.authors">作者：{{ dialogArticle.authors }}</span><span>发布时间：{{ dialogArticle.raw_time }}</span></div>
          <div style="padding: 0 10%;line-height: 30px;font-size: 16px;" v-html="dialogArticle.content"></div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import { getQhrbArticle, getQhrbLayout } from '@/api/information/qhrb'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  export default {
    data() {
      return {
        loadingArticle: false,
        queryIssue: '',
        queryAuthor: '',
        queryDate: new Date(),
        queryTitle: '',

        articleList: [],
        layoutList: [],
        showArticleContent: false,
        dialogArticle: {
          title: '',
          authors: '',
          create_time: '',
          content: ''
        },
        totalCount: 0,
        currentPage: 1,
        pageSize: 30,
      }
    },
    mounted() {
      this.refreshQhrbArticle()
    },
    methods: {
      clearDialogArticle() {
        this.dialogArticle.title = ''
        this.dialogArticle.authors = ''
        this.dialogArticle.create_time = ''
        this.dialogArticle.content = ''
      },

      pageSizeChanged(pageSize) {
        this.pageSize = pageSize
        this.refreshQhrbArticle()
      },
      currentPageChanged(page) {
        this.currentPage = page
        this.refreshQhrbArticle()
      },

      // 检索当日报纸版面
      queryDateLayout(dateStr) {
        getQhrbLayout(dateStr).then((res) => {
          this.layoutList = res.data
        })
      },

      // 检索当日报纸文章
      queryDateArticle() {
        this.page = 1
        this.refreshQhrbArticle()
      },

      openLayout(item) {
        window.open(item.filepath, '_blank')
      },

      refreshQhrbArticle() {
        let params = {
          date: null,
          issue: this.queryIssue || null,
          authors: this.queryAuthor || null,
          title: this.queryTitle || null,
          page: this.currentPage,
          page_size: 30,
        }
        if (this.queryDate) {
          params.date = datetimeToStr(this.queryDate, true, '-')
          // 检索当日报纸版面
          this.queryDateLayout(params.date)
        } else {
          this.layoutList = []
        }
        this.loadingArticle = true
        getQhrbArticle(params)
          .then((res) => {
            this.articleList = res.data.records
            this.totalCount = res.data.total_count
            this.currentPage = res.data.cur_page
            this.pageSize = res.data.page_size
            this.loadingArticle = false
          })
          .catch(() => {
            this.loadingArticle = false
          })
      },

      articleTableCellClick(row, column, cell, event) {
        if (column.property === 'title') {
          this.showArticleContent = true
          this.dialogArticle.title = row.title
          this.dialogArticle.authors = row.authors
          this.dialogArticle.raw_time = row.raw_time
          this.dialogArticle.content = row.content
        }
      },
    },
  }
</script>

<style>
  .index-flex-label{
    min-width: 34px;
    margin-left: 8px;
  }
  .column-title{
    cursor: pointer;
  }
  .article-dialog .el-dialog__body{
    /* padding-top: 20px; */
    padding-left: 0;
    padding-right: 0;
  }
  .article-dialog img{
    width: 100%;
  }
</style>
